<template>
	<view class="container">

		<!-- 顶部背景和定位栏 -->
		<view class="header">
			<view class="location-box">

				<image class="location-icon" src="/static/images/定位2.png" @click="toCity" />
				<view class="location-text" @click="toCity">郑州市高新区莲花街32号</view>
				<view class="refresh" @click="refreshLocation">
					<image class="refresh-icon" src="/static/images/刷新 (1).png" />
					<text class="refresh-text">刷新</text>
				</view>
			</view>
		</view>

		<!-- 功能入口 -->
		<view class="function-box">
			<view class="function-item" v-for="(item, index) in functions" :key="index" @click="navigateToFunction(item)">
				<view class="function-icon-wrap" :style="{ background: item.bgColor }">
					<image class="function-icon" :src="item.icon" />
				</view>
				<text class="function-text">{{ item.name }}</text>
			</view>
		</view>

		<!-- 附近加油站 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">附近加油站</text>
				<text class="more">更多 ></text>
			</view>
			<text class="section-subtitle">根据您的位置推荐最近的加油站</text>
			<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers" scale="14" show-location />
		</view>

		<!-- 优惠团购 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">优惠团购</text>
				<text class="more">更多 ></text>
			</view>
			<view class="section-subtitle">钜惠袭来 为您的爱车续航</view>
			<view class="group-list">
				<view class="group-item" v-for="(item, index) in groupList" :key="index">
					<image class="group-img" :src="item.img" />
					<text class="group-text">{{ item.title }}</text>
				</view>
			</view>
		</view>
		
	</view>
	<!-- 自定义 TabBar -->
	<CustomTabbar />
</template>

<script>
	import CustomTabbar from '@/uni_modules/components/custom-tab-bar/custom-tab-bar.vue';
	import {post} from "@/utils/request.js";
	export default {
		components: {
			CustomTabbar 
		},
		data() {
			return {
				latitude: 34.74821, // 默认经纬度
				longitude: 113.61332,
				markers: [{
						id: 1,
						latitude: 34.74831,
						longitude: 113.61342,
						title: "加油站A",
						iconPath: "/static/images/位置 拷贝 4.png",
						width: 30,
						height: 30
					},
					{
						id: 2,
						latitude: 34.74811,
						longitude: 113.61322,
						title: "加油站B",
						iconPath: "/static/images/位置 拷贝 4.png",
						width: 30,
						height: 30
					}
				],
				functions: [{
						name: '车辆维修',
						icon: '/static/images/车辆维修1-01.png',
						bgColor: 'linear-gradient(180deg, #4080FF 0%, #69B1FF 100%)',
						path: '/pages/car-repair-model/repair/repair',

					},
					{
						name: '汽车保养',
						icon: '/static/images/保养.png',
						bgColor: 'linear-gradient(180deg, #FFB74D 0%, #FFCC80 100%)',
						path: '/pages/carMaintenance/nearbyStores/nearbyStores?typeId=2'

					},
					{
						name: '专业洗车',
						icon: '/static/images/洗车.png',
						bgColor: 'linear-gradient(180deg, #4CAF50 0%, #81C784 100%)',
						path: '/pages/carMaintenance/nearbyStores/nearbyStores?typeId=3',
	
					},
					{
						name: '就近加油',
						icon: '/static/images/加油枪 (1).png',
						bgColor: 'linear-gradient(180deg, #64B5F6 0%, #90CAF9 100%)',
						path: '/pages/refuelNearby/nearbyOil/nearbyOil'
					}
				],
				groupList: [{
						title: '汽车惠民活动走进……',
						img: '/static/images/1.jpg'
					},
					{
						title: '汽车惠民活动走进……',
						img: '/static/images/1.jpg'
					},
					{
						title: '汽车惠民活动走进……',
						img: '/static/images/1.jpg'
					},
					{
						title: '汽车惠民活动走进……',
						img: '/static/images/1.jpg'
					}
				]
			}
		},
		onLoad() {
			// 获取当前位置
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.latitude = res.latitude
					this.longitude = res.longitude
				}
			}),
			this.uploadLocationToServer();
		},
		onShow() {
			// 页面显示时更新 TabBar 选中状态
			if (typeof this.getTabBar === 'function' && this.getTabBar()) {
				this.getTabBar().selected = 0
			}
		},
		methods: {
			// 上传位置信息到后端
			uploadLocationToServer() {
				console.log("23423");
				const userLocation = uni.getStorageSync('userLocation');
				
				const locationInfo = {
					latitude: userLocation?.latitude || 0,
					longitude: userLocation?.longitude || 0
				};
				
				post('/user/user/update', locationInfo)
					.then(res => {
						if (res.code === 200) {
							console.log('位置信息上传成功:', res);
						} else {                                                                       
							console.error('位置信息上传失败:', res.msg);
						}
					})
					.catch(error => {
						console.error('位置信息上传异常:', error);
					});
			},
			
			
			refreshLocation() {
				uni.showToast({
					title: '位置已刷新',
					icon: 'none'
				})
			},
			toCity() {
				uni.navigateTo({
					url: '/pages/city/city'
				})
			},
			// 通用跳转方法
			navigateTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			// 功能项点击方法
			navigateToFunction(item) {
				this.navigateTo(item.path);
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}


	/* 顶部背景 */
	.header {
		background-image: url('/static/images/图层 1.png');
		height: 300rpx;
		padding: 40rpx 30rpx;
		color: #fff;
		position: relative;

	}

	.title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.location-box {
		margin-top: 60rpx;
		background-color: #fff;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.location-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.location-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.refresh {
		display: flex;
		align-items: center;
	}

	.refresh-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 6rpx;
	}

	.refresh-text {
		font-size: 26rpx;
		color: #2176F3;
	}

	/* 功能入口 */
	.function-box {
		background: #fff;
		border-radius: 20rpx;
		margin: -130rpx 30rpx 20rpx;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-around;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 图标背景容器：控制渐变背景、大小、圆角 */
	.function-icon-wrap {
		width: 90rpx;
		/* 背景容器宽度 */
		height: 90rpx;
		/* 背景容器高度 */
		border-radius: 20rpx;
		/* 背景容器圆角 */
		display: flex;
		/* 让图标居中 */
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
	}

	/* 图标：控制在背景内的大小 */
	.function-icon {
		width: 60rpx;
		/* 图标宽度 */
		height: 60rpx;
		/* 图标高度 */
	}

	.function-text {
		font-size: 28rpx;
		color: #333;
	}

	/* section 区域 */
	.section {
		background: #fff;
		border-radius: 20rpx;
		margin: 0 30rpx 20rpx;
		padding: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.more {
		font-size: 26rpx;
		color: #666;
	}

	.section-subtitle {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.map {
		width: 100%;
		height: 300rpx;
		border-radius: 12rpx;
	}

	/* 优惠团购 */
	.group-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.group-item {
		width: 48%;
		margin-bottom: 20rpx;
	}

	.group-img {
		width: 100%;
		height: 180rpx;
		border-radius: 12rpx;
	}

	.group-text {
		font-size: 26rpx;
		margin-top: 10rpx;
		color: #333;
	}
</style>